<template>
  <div class="app-container">
    <el-dialog title="选择客户" :visible.sync=this.open width="1000px" append-to-body :before-close="handleClose">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="客户姓名" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入客户姓名"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="证件号码" prop="idCard">
          <el-input
            v-model="queryParams.idCard"
            placeholder="请输入证件号码"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data=this.custInfoList highlight-current-row
                @current-change="handleCurrentChange">
        <el-table-column label="户主" align="center" prop="hzxm"/>
        <el-table-column label="户籍编号" width="180" align="center" prop="hjbh"/>
        <el-table-column label="姓名" align="center" prop="name"/>
        <el-table-column label="证件号码" width="180" align="center" prop="idCard"/>
        <el-table-column label="联系电话" width="180" align="center" prop="phone"/>
        <el-table-column label="与户主关系" width="180" align="center" prop="yhzgx" :formatter="yhzgxFormat"/>
        <el-table-column label="所属社区" align="center" width="180" prop="sssq"/>
        <el-table-column label="地址" width="180" align="center" prop="address" :show-overflow-tooltip="true"/>
        <el-table-column label="家庭人口" align="center" prop="labour"/>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />


    </el-dialog>

  </div>
</template>

<script>

import {queryCustmoerLatLngEmpty} from "@/api/buss/grid";

export default {
  name: "updateCustomInfo",
  props: {
    isShow: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      custInfoList: [],
      // 是否显示弹出层
      open: this.isShow,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: '',
        idCard: '',
      },
      total: 0,


    }
  },
  watch: {
    isShow(val) {
      this.isShow = val
    }
  },
  mounted() {
    this.getDicts("wgcj_yhzgx").then(response => {
      this.wgcjyhzgxOptions = response.data;
    });
    this.getList();
  },
  methods: {
    handleClose() {
      this.$emit('closeWin')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 与户主关系字典翻译
    yhzgxFormat(row, column) {
      return this.selectDictLabel(this.wgcjyhzgxOptions, row.yhzgx);
    },
    //查看数据列表
    getList() {
      this.loading = true;
      queryCustmoerLatLngEmpty(this.queryParams).then(response => {
        this.custInfoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleCurrentChange(val) {
      this.currentRow = val
      this.$emit('updateCustomInfo', {params: this.currentRow});
    }

  }

}
</script>

<style scoped>

</style>
